<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市发展意向收集平台</title>
    <!-- 使用本地Font Awesome替代CDN -->
    <link rel="stylesheet" href="../../static/element/font-awesome.css">
    <style>
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        
        .header {
            background-color: #003366;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border-left: 4px solid #003366;
            background-color: #f9f9f9;
        }
        
        h1, h2, h3 {
            color: #003366;
        }
        
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background-color: #003366;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            margin: 10px 5px;
            cursor: pointer;
            border: none;
            font-size: 16px;
        }
        
        .btn:hover {
            background-color: #004488;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
        .footer {
            text-align: center;
            padding: 20px;
            background-color: #003366;
            color: white;
            margin-top: 20px;
        }
        
        .note {
            background-color: #fff8dc;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
        }
        
        /* 分布图样式 */
        #distributionChart {
            width: 100%;
            height: 300px;
            margin-top: 20px;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 10px;
        }
        
        .chart-bar {
            background-color: #003366;
            color: white;
            text-align: right;
            padding: 5px 10px;
            margin-bottom: 5px;
            border-radius: 0 4px 4px 0;
            transition: width 0.5s ease;
            position: relative;
        }
        
        .chart-label {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>城市发展意向收集平台</h1>
        <p>了解大家向往的发展城市，共建美好未来</p>
    </div>
    
    <!-- 添加跳转到聊天室的按钮 -->
    <div style="position: fixed; top: 20px; right: 20px; z-index: 1000;">
        <a href="../mx_chat.html" id="chatLink" class="btn" style="background-color: #2196F3; padding: 10px 15px; font-size: 14px;">
            <i class="fa fa-comments"></i> 进入聊天室
        </a>
    </div>
    
    <div style="position: fixed; top: 20px; left: 20px; z-index: 1000;">
         <!-- 全局ESC键监听脚本 -->
         <script src="../../../js/global_escape_listener.js"></script>
      </div>
    
    <div class="container">
        <div class="note">
            <strong>温馨提示：</strong>本平台旨在收集全国网友向往的发展城市信息，帮助大家了解城市发展趋势。您的参与将为我们提供宝贵的数据支持。
        </div>
        
        <div class="section">
            <h2>平台介绍</h2>
            <p>本平台致力于收集和展示全国网友向往的发展城市分布情况，帮助大家了解城市吸引力趋势，为个人发展规划和城市建设提供参考。</p>
            <p>参与方式简单便捷，只需选择您最向往发展的城市即可。</p>
        </div>
        
        <div class="section">
            <h2>城市意向选择</h2>
            <p>请选择您最向往发展的城市，并留下联系方式以便我们与您联系：</p>
            <form id="registrationForm">
                <div class="form-group">
                    <label for="location">意向城市：</label>
                    <select id="location" name="location" required>
                        <option value="">请选择...</option>
                        <option value="beijing">北京</option>
                        <option value="shanghai">上海</option>
                        <option value="guangzhou">广州</option>
                        <option value="shenzhen">深圳</option>
                        <option value="hangzhou">杭州</option>
                        <option value="chengdu">成都</option>
                        <option value="wuhan">武汉</option>
                        <option value="chongqing">重庆</option>
                        <option value="nanjing">南京</option>
                        <option value="qingdao">青岛</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="wechat">微信号：</label>
                    <input type="text" id="wechat" name="wechat" placeholder="请输入您的微信号">
                </div>
                
                <div class="form-group">
                    <label for="email">电子邮箱：</label>
                    <input type="email" id="email" name="email" placeholder="请输入您的电子邮箱">
                </div>
                
                <button type="submit" class="btn">提交意向</button>
            </form>
        </div>
        
        <div class="section">
            <h2>城市意向分布图</h2>
            <p>以下是网友提交的城市发展意向分布情况：</p>
            <div id="distributionChart"></div>
        </div>
    </div>
    
    <div class="footer">
        <p>城市发展意向收集平台 &copy; 2025</p>
        <p>致力于提供有价值的城市发展趋势数据</p>
    </div>
    
    <script>
        // 城市名称映射
        const cityNames = {
            'beijing': '北京',
            'shanghai': '上海',
            'guangzhou': '广州',
            'shenzhen': '深圳',
            'hangzhou': '杭州',
            'chengdu': '成都',
            'wuhan': '武汉',
            'chongqing': '重庆',
            'nanjing': '南京',
            'qingdao': '青岛',
            'other': '其他'
        };
        
        // 城市基本信息数据
        const cityInfo = {
            'beijing': {
                name: '北京',
                population: '2153.6万人',
                populationFlow: '+56.7万人/年',
                advantages: ['中国首都，政治文化中心', '教育资源丰富，高校聚集', '科技创新能力强', '交通网络发达', '历史文化底蕴深厚']
            },
            'shanghai': {
                name: '上海',
                population: '2428.14万人',
                populationFlow: '+53.2万人/年',
                advantages: ['中国经济中心', '国际金融枢纽', '对外开放程度高', '商业环境优越', '城市现代化程度高']
            },
            'guangzhou': {
                name: '广州',
                population: '1530.59万人',
                populationFlow: '+45.8万人/年',
                advantages: ['华南地区中心城市', '制造业强市', '商贸物流发达', '气候宜人', '生活成本相对较低']
            },
            'shenzhen': {
                name: '深圳',
                population: '1343.88万人',
                populationFlow: '+62.1万人/年',
                advantages: ['中国硅谷，科技创新中心', '年轻活力城市', '创业环境优越', '经济增长迅速', '毗邻香港的地理优势']
            },
            'hangzhou': {
                name: '杭州',
                population: '1036万人',
                populationFlow: '+48.5万人/年',
                advantages: ['数字经济之都', '电子商务中心', '互联网产业发达', '自然风光优美', '城市宜居度高']
            },
            'chengdu': {
                name: '成都',
                population: '1658.10万人',
                populationFlow: '+39.2万人/年',
                advantages: ['西南地区中心城市', '美食之都', '生活节奏舒适', '文创产业发达', '天府之国，自然资源丰富']
            },
            'wuhan': {
                name: '武汉',
                population: '1121.2万人',
                populationFlow: '+32.7万人/年',
                advantages: ['华中地区中心城市', '九省通衢，交通枢纽', '高校资源丰富', '制造业基础雄厚', '发展潜力巨大']
            },
            'chongqing': {
                name: '重庆',
                population: '3124.32万人',
                populationFlow: '+28.9万人/年',
                advantages: ['西部大开发重要支点', '火锅之都', '山地城市特色鲜明', '产业门类齐全', '政策支持力度大']
            },
            'nanjing': {
                name: '南京',
                population: '850万人',
                populationFlow: '+35.6万人/年',
                advantages: ['历史文化名城', '教育科研实力强', '长三角重要节点城市', '产业基础扎实', '城市环境优美']
            },
            'qingdao': {
                name: '青岛',
                population: '1007.17万人',
                populationFlow: '+26.4万人/年',
                advantages: ['海滨城市，风景秀丽', '制造业强市', '港口经济发达', '啤酒文化闻名', '宜居宜业的现代化城市']
            },
            'other': {
                name: '其他',
                population: '数据统计中',
                populationFlow: '数据统计中',
                advantages: ['各具特色的发展机会', '差异化的产业布局', '潜力巨大的新兴城市', '独特的地域文化魅力']
            }
        };
        
        // 创建信息展示面板
        function createInfoPanel() {
            const panel = document.createElement('div');
            panel.id = 'cityInfoPanel';
            panel.style.cssText = `
                position: absolute;
                background-color: white;
                border: 1px solid #003366;
                border-radius: 4px;
                padding: 15px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.2);
                z-index: 1000;
                width: 250px;
                display: none;
                font-size: 14px;
            `;
            document.body.appendChild(panel);
        }
        
        // 显示城市信息
        function showCityInfo(cityCode, event) {
            const panel = document.getElementById('cityInfoPanel');
            if (!panel || !cityInfo[cityCode]) return;
            
            const info = cityInfo[cityCode];
            let html = `<h3 style="margin-top: 0; color: #003366;">${info.name}</h3>`;
            html += `<p><strong>常驻人口：</strong>${info.population}</p>`;
            html += `<p><strong>年人口净流入：</strong>${info.populationFlow}</p>`;
            html += `<p><strong>发展优势：</strong></p><ul>`;
            info.advantages.forEach(advantage => {
                html += `<li style="margin-bottom: 5px;">${advantage}</li>`;
            });
            html += `</ul>`;
            
            panel.innerHTML = html;
            panel.style.display = 'block';
            
            // 计算面板位置，避免超出屏幕
            const x = event.pageX + 10;
            const y = event.pageY - 10;
            panel.style.left = `${x}px`;
            panel.style.top = `${y}px`;
        }
        
        // 隐藏城市信息
        function hideCityInfo() {
            const panel = document.getElementById('cityInfoPanel');
            if (panel) {
                panel.style.display = 'none';
            }
        }

        // 初始化或加载城市意向数据
        function loadCityData() {
            const savedData = localStorage.getItem('city_intentions');
            if (savedData) {
                return JSON.parse(savedData);
            } else {
                // 初始化数据，包含默认城市
                const initialData = {};
                Object.keys(cityNames).forEach(city => {
                    initialData[city] = Math.floor(Math.random() * 50) + 10; // 添加一些模拟数据
                });
                return initialData;
            }
        }

        // 保存城市意向数据
        function saveCityData(data) {
            localStorage.setItem('city_intentions', JSON.stringify(data));
        }

        // 绘制城市意向分布图
        function drawChart(data) {
            const chartContainer = document.getElementById('distributionChart');
            chartContainer.innerHTML = '';
            
            // 计算最大值用于比例计算
            const maxValue = Math.max(...Object.values(data));
            
            // 按值排序城市
            const sortedCities = Object.entries(data).sort((a, b) => b[1] - a[1]);
            
            // 创建柱状图
            sortedCities.forEach(([cityCode, count]) => {
                const bar = document.createElement('div');
                bar.className = 'chart-bar';
                
                const percentage = (count / maxValue) * 100;
                bar.style.width = `${percentage}%`;
                
                const label = document.createElement('span');
                label.className = 'chart-label';
                label.textContent = cityNames[cityCode];
                
                const value = document.createElement('span');
                value.textContent = count;
                
                // 添加鼠标事件监听器
                bar.addEventListener('mouseenter', (e) => {
                    showCityInfo(cityCode, e);
                    bar.style.backgroundColor = '#005599'; // 高亮颜色
                });
                
                bar.addEventListener('mouseleave', () => {
                    hideCityInfo();
                    bar.style.backgroundColor = '#003366'; // 恢复原颜色
                });
                
                // 为标签也添加事件监听器
                label.addEventListener('mouseenter', (e) => {
                    showCityInfo(cityCode, e);
                    bar.style.backgroundColor = '#005599'; // 高亮颜色
                });
                
                label.addEventListener('mouseleave', () => {
                    hideCityInfo();
                    bar.style.backgroundColor = '#003366'; // 恢复原颜色
                });
                
                bar.appendChild(label);
                bar.appendChild(value);
                chartContainer.appendChild(bar);
            });
        }

        // 处理表单提交
        document.getElementById('registrationForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const selectedCity = document.getElementById('location').value;
            const wechat = document.getElementById('wechat').value;
            const email = document.getElementById('email').value;
            
            if (!selectedCity) return;
            
            // 加载现有城市数据
            const cityData = loadCityData();
            
            // 更新城市数据
            if (cityData[selectedCity]) {
                cityData[selectedCity]++;
            } else {
                cityData[selectedCity] = 1;
            }
            
            // 保存城市数据
            saveCityData(cityData);
            
            // 保存用户联系信息（仅用于演示，实际应用中应考虑隐私保护）
            if (wechat || email) {
                const userContacts = JSON.parse(localStorage.getItem('user_contacts') || '[]');
                userContacts.push({
                    city: selectedCity,
                    wechat: wechat,
                    email: email,
                    timestamp: new Date().toISOString()
                });
                localStorage.setItem('user_contacts', JSON.stringify(userContacts));
            }
            
            // 更新图表
            drawChart(cityData);
            
            alert('感谢您的参与！您的城市意向已成功提交。');
            
            // 重置表单
            document.getElementById('registrationForm').reset();
        });

        // 页面加载完成后添加聊天室链接的参数处理
        window.addEventListener('DOMContentLoaded', function() {
            // 获取当前页面的URL参数
            const urlParams = new URLSearchParams(window.location.search);
            
            // 构建聊天室链接
            const chatLink = document.getElementById('chatLink');
            if (chatLink) {
                // 基础聊天室URL
                let chatUrl = 'mx_chat.html';
                
                // 添加参数
                const params = [];
                for (const [key, value] of urlParams) {
                    params.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
                }
                
                // 如果有参数，则添加到URL中
                if (params.length > 0) {
                    chatUrl += '?' + params.join('&');
                }
                
                // 设置链接
                chatLink.href = chatUrl;
            }
        });
    </script>
</body>
</html>